<template>
  <div class="ks-input">
    <!-- text -->
    <!--<span>{{ label }}</span>-->

    <input v-if="type == 'text'"
           type="text"
           :placeholder="placeholder"
           ref="input"
           v-model="inputVal"
           :maxLength="maxLength"
           @click="doClick"
           :style="inputStyle"
    />

    <!-- password -->
    <input v-if="type == 'password'"
           type="password"
           :placeholder="placeholder"
           ref="input"
           v-model="inputVal"
           :maxLength="maxLength"
           @click="doClick"
           :style="inputStyle"
    />

    <!-- tel -->
    <input v-if="type == 'tel'"
           type="tel"
           :placeholder="placeholder"
           ref="input"
           v-model="inputVal"
           @click="doClick"
           :style="inputStyle"
    />

    <button v-if="isShowVerificationBtn"
            :class="[isUseVerification ? 'verification-use': 'disabled verification-un-use']"
            class="verification-init"
            @click="clickBtn"
            ref="verificationCode"
    >
      <span>{{ verificationContent }}</span>
    </button>
  </div>
</template>
<script>
  import { rem2px } from '../utils/utility';
  export default {
    props: {
      type: {
        type: String,
        default: 'text'
      },
      isShowVerificationBtn: {
        type: [Boolean, String],
        default: false
      },
      placeholder: {
        type: String,
        default: ''
      },
      maxLength: {
        type: Number
      },
      value: {
        type: String,
        default: ''
      },
      isUseVerification: {
        type: Boolean,
        default: false
      },
      buttonClick: Function,
      verificationContent: {
        type: [String, Number],
        default: ''
      }
    },
    data() {
      return {
        showClearIcon: false,
        inputVal: ''
      };
    },
    computed: {
      inputStyle() {
        return {
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'right 50%',
          backgroundSize: '0.34rem'
        };
      }
    },
    watch: {
      value(newVal, oldVal) {
        this.inputVal = newVal;
      },
      inputVal(val, oldVal) {
        this.showClearIcon = !!val;
        this.$emit('input', val);
      }
    },
    methods: {
      updateValue(value) {
        this.inputVal = value;
      },
      clickBtn() {
        if (this.isUseVerification) {
          this.buttonClick();
        }
      },
      doClick(e) {
        if (e.offsetX > this.$refs.input.clientWidth - rem2px(0.40)) {
          setTimeout(() => {
            this.inputVal = '';
          }, 0);
        }
      }
    },
    created() {
      this.inputVal = this.value;
    }
  };
</script>
<style scoped>
  .ks-input {
    flex: 1;
    display: flex;
    align-items: center;
    height: 0.88rem;
    background-color: #fff;
    color: #282828;
    font-size: 0.32rem;
    white-space: nowrap;
  }
  span:nth-child(1) {
    margin-right: 0.1rem;
  }
  input {
    flex: 1;
    width: 0;
    font-size: 0.26rem;
    margin-left: 0.4rem;
    border-width:0;
    outline: none;
    border-bottom: 1px solid #c0c0c0;
  }
  .verification-init {
    border-width:0;
    outline: none;
    min-width:1.6rem;
    height: 0.5rem;
    margin-left: 0.1rem;
    font-size: 0.24rem;
    color: #b2b2b2;
    border-radius: 0.2rem;
    margin-top: -0.2rem;
  }
  span:nth-child(1) {
    margin-right: 0;
  }
  .verification-un-use {
    background-color: #eeeeee;
    border: 1px solid #eeeeee;
  }
  .verification-use {
    color: #5b86e5;
    background-color: #ffffff;
    border:1px solid #5b86e5;
  }
</style>
